import React, { Component } from "react";
import { connect } from "react-redux";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import "./index.scss";
import yhTools from "../../../../tools/yh";
import xhfConfig from "../../../../config/XHFConfig";
import { Toast } from "antd-mobile";
import iconReturn from "../../../../images/icon/fail.png";
import iconEarn from "../../../../images/icon/ok.png";

class BillDetailPage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			backPath: "#/bill", // 路径
			tradeType: "", // 0-交易，1-退款
			interestAmount: "", // 利息
			punishAmount: "", // 罚息
			feeAmount: "", // 手续费
			storeName: "", // 商户名称
			tradeDate: "", // 交易日期
			tradeNo: "", // 订单号
			merchantNo: "", // 商户订单号
			tradeAmount: "", //实付金额
			couponAmount: "", //优惠金额
			orderAmount: "", //订单金额
			comeInType: "0", //进入页面的来源  0->账单列表  1->付款成功
			cashBackAmount: "", //返现金金额
			payDiscountAmount: "" //支付活动优惠
		};
	}

	componentDidMount() {
		const { tradeNo, tradeType } = this.props.billReducer.billDetail;
		const { isAnShuoUser } = this.props.billReducer;
		if (isAnShuoUser) {
			//是灰度用户
			this.prepareDataByZF(tradeNo, tradeType);
		} else {
			this.prepareData(tradeNo, tradeType);
		}
	}
	//灰度用户调支付查明细
	prepareDataByZF(tradeNo, tradeType) {
		const params = {
			url: xhfConfig.billDetailInfoByZf,
			params: {
				tradeNo: tradeNo,
				tradeType
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			if (res.resCode == "200") {
				this.setState({
					...res.data,
					storeName: res.data.stroreName
				});
			} else {
				Toast.info(res.resMsg, 2);
			}
		});
	}

	//不是灰度查账单应用查明细
	prepareData(tradeNo, tradeType) {
		const params = {
			url: xhfConfig.billDetailInfo,
			params: {
				tradeNo,
				tradeType
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			if (res.code === "0") {
				this.setState({
					...res.data
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	render() {
		const _pageParams = {
			header: {
				title: "订单详情"
			},
			history: this.props.history
		};
		const {
			tradeType,
			tradeAmount,
			storeName,
			orderAmount,
			couponAmount,
			// randomAmount,
			cashBackAmount,
			tradeDate,
			tradeNo,
			merchantNo,
			payDiscountAmount
		} = this.state;

		// "tradeType":0-交易，1-退款
		const isTranscation = Number(tradeType) <= 0;
		// const hasRandomAmount = Number(randomAmount) > 0;
		const hasCashback = Number(cashBackAmount) > 0;
		const hasPayDiscountAmount = Number(payDiscountAmount) > 0;

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="bill-detail-container">
					<div className="row textColor">
						<div className="showTab">
							<img
								alt=""
								className="icon-money-success"
								src={isTranscation ? iconEarn : iconReturn}
							/>
							<div className="margin1">
								{isTranscation ? "交易成功" : "退款成功"}
							</div>
							<div className="margin1">
								<label className={isTranscation ? "amount" : "amount red"}>
									{tradeAmount}
								</label>
							</div>
						</div>
					</div>
					<div className="row detail textColor">
						<div className="cell cell-main-title">
							<label>商户名称</label>
							<label>{storeName}</label>
						</div>
						<div className="cell">
							<label>{isTranscation ? "订单金额" : "申请退款金额"}</label>
							<label>{orderAmount}元</label>
						</div>
						<div className="cell">
							<label>{isTranscation ? "支付券" : "支付券回收"}</label>
							<label>-{couponAmount}元</label>
						</div>
						{hasPayDiscountAmount && (
							<div className="cell">
								<label>
									{isTranscation ? "支付活动优惠" : "支付活动优惠回收"}
								</label>
								<label>-{payDiscountAmount}元</label>
							</div>
						)}
						{/* {hasRandomAmount && (
                            <div className="cell">
                                <label>
                                    {isTranscation
                                        ? "随机立减"
                                        : "随机立减回收"}
                                </label>
                                <label>-{randomAmount}元</label>
                            </div>
                        )} */}
						{hasCashback && (
							<div className="cell">
								<label>{isTranscation ? "红包优惠" : "退红包金额"}</label>
								<label>-{cashBackAmount}元</label>
							</div>
						)}
						<div className="cell">
							<label>{isTranscation ? "实付" : "实退"}</label>
							<label className="font-link">&yen;{tradeAmount}</label>
						</div>
						<div className="space"></div>

						<div className="cell">
							<label>{isTranscation ? "消费时间" : "退款时间"}</label>
							<label>{tradeDate}</label>
						</div>
						<div className="cell">
							<label>永辉支付流水号</label>
							<label>{tradeNo}</label>
						</div>
						<div className="cell">
							<label>{isTranscation ? "商户订单号" : "商户退款单订单号"}</label>
							<label>{merchantNo}</label>
						</div>
						<div className="space"></div>
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(BillDetailPage);
